iT邦幫忙

2021 iThome 鐵人賽

DAY 28
3
Modern Web

ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#系列 第 28

Day 28 - 將 Specification 後台儲存資料提取後,送至前台渲染 Specification 版面內容區塊 - MSSQL 查詢精靈 - ASP.NET Web Forms C#

  • 分享至 

  • xImage
  •  

=x= 🌵 Yachts 前台頁面 Specification - Content Page 後端功能製作。


Specification 內容區塊介紹 :

https://ithelp.ithome.com.tw/upload/images/20211012/20139487O9WZOeFUc0.jpg

📌 Specification 內容區塊的重點會是所有型號細節全部存在同一張表,需使用型號 GUID 來比對型號的 ID,標題也要用 ID 來比對,然後相同細節的標題只會出現一次,沒有細節的標題不會出現,實作會介紹如何使用精靈來幫助產出 SQL 語法。



Specification - Content Page 頁面後端實作 :

1. 於前台資料夾右鍵新增"使用主版頁面的 Web Form" 並指定 Yachts.Master為主版。


2. 於內容區塊內放入 Specification 分頁內容程式碼,並使用 asp:Literal 等修改參考如下

https://ithelp.ithome.com.tw/upload/images/20211012/20139487NiD0mSHjeE.jpg


3. 於後置程式碼 Page_Load 事件內加入讀取內容方法 loadContent(); 參考如下

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadContent();
    }
}


4. 開啟 Microsoft SQL Server Management 使用查詢精靈協助取得 SQL 語法參考

https://ithelp.ithome.com.tw/upload/images/20211012/20139487ZNodXGfIjV.jpg


5. 建立取得 Specification 分頁內容 loadContent(); 方法邏輯如下

private void loadContent()
{
    string guidStr = Session["guid"].ToString();
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT Yachts.guid, Specification.detail, DetailTitleSort.detailTitleSort"
                + " FROM DetailTitleSort INNER JOIN"
                    + " Specification ON DetailTitleSort.id = Specification.detailTitleSort_ID INNER JOIN"
                    + " Yachts ON Specification.yachtModel_ID = Yachts.id WHERE Yachts.guid = @guidStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guidStr", guidStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    StringBuilder detailHtmlStr = new StringBuilder();
    //用於檢查 Title 是否相同
    string checkTitle = "";
    while (reader.Read()) {
        string detailTitle = reader["detailTitleSort"].ToString();
        //需使用 HtmlDecode ,因為存入時有使用 HtmlEncode 轉換換行用標籤 <br>
        string detailStr = HttpUtility.HtmlDecode(reader["detail"].ToString());
        // 加入第一個標題,並更新檢查用變數
        if (String.IsNullOrEmpty(checkTitle)) {
            detailHtmlStr.Append($"<p>{detailTitle}</p><ul>");
            checkTitle = detailTitle;
        }
        // Title 不相同時就更新確認用變數並加入 Title 的 HTML 語法
        else if (!checkTitle.Equals(detailTitle)) {
            checkTitle = detailTitle;
            detailHtmlStr.Append($"</ul><p>{detailTitle}</p><ul>");
        }
        detailHtmlStr.Append($"<li>{detailStr}</li>");
    }
    connection.Close();
    //結束 HTML 字串並渲染畫面
    detailHtmlStr.Append($"</ul>");
    ContentHtml.Text = detailHtmlStr.ToString();
}
  • 🌵 使用 MSSQL 精靈產生的語法並加上篩選條件WHERE Yachts.guid = @guidStr

  • 🌵 SQL 語法換行記得不要漏掉空格。


6. 模擬頁面檢查是否正確呈現,完成~



本日總結 :

📢 今天的內容原本是寫成 3 個 SQL 命令去分別執行,後來才改成這樣,順便介紹用精靈來協助產生 SQL 的 JOIN 語法,比較需要思考一下的地方是,標題迴圈的邏輯,可以都不管列表的解尾標籤 </ul>,頁面還是可以正常渲染,不過還是用完整的方式寫出來了。

  • 明日將介紹製作前台 Layout & deck plan / Video - Content Page 後端的相關細節。

上一篇
Day 27 - 依 Yachts - Specification 前台頁面分析拆解後,逐步建立 Specification 後台功能 - 換行跳脫字元 - ASP.NET Web Forms C#
下一篇
Day 29 - 將 Yacht 後台儲存資料提取後,送至前台渲染 Layout&deck 及 Video 版面內容區塊 - 嵌入 YouTube 影片 - ASP.NET Web Forms C#
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-12 18:36:58

恭喜大大即將完賽XD !!!

龜人 iT邦新手 3 級 ‧ 2021-10-12 18:40:40 檢舉

/images/emoticon/emoticon41.gif

我要留言

立即登入留言